<template>
  <div>
    <a-layout-content
          :style="{
            margin: '24px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '280px',
          }"
        >
    <div style="margin-bottom: 10px;">
      <a-button type="primary" @click="pushAdd"><a-icon type="plus" />新增产品</a-button>
    </div>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="dataByGoodsList"
      bordered
      :scroll="{ x: 1400 }"
      :loading="loadingStatus"
      :pagination="false">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <div
        slot="shopInfo"
        slot-scope="text, record"
        style="display: flex; text-align: left"
      >
        <div style="margin-right: 15px">
          <van-image
            width="100"
            height="100"
            :src="record.imgUrl"
            style="display: block"
          />
        </div>

        <div>
          <div style="margin-bottom: 5px;">
            <a href="javascript:;">{{ record.title }}</a>
          </div>
          <div style="margin-bottom: 5px;">发布时间：{{ record.addTime }}</div>
          <div style="margin-bottom: 5px;">下单总量：<a-tag color="#f50">50</a-tag></div>
        </div>
      </div>

      <span slot="operator" slot-scope="operator">
        <!-- 运营商 0空 1电信 2联通 3移动 4虚拟 -->
        {{ getOperatorText(operator) }}
      </span>

      <span slot="ageDoor" slot-scope="text, record">
        {{ record.minAge + ' - ' + record.maxAge }}
      </span>

      <span slot="status" slot-scope="text,record">
        <!-- <a-tag :color="status == 1 ? 'green' : 'red'">
          {{ status == 1 ? "上架" : "已下架" }}
        </a-tag> -->

        <a-switch default-checked @click="statusOnChange(record.id)" :defaultChecked= "record.status == 1 ? true : false"/>

      </span>

      <div slot="action" slot-scope="record" >
        <span v-if ="(record.status  == 1 ? false : true)" >
        <a-popconfirm
          v-if="dataByGoodsList.length"
          title="确定要删除?"
          ok-text="是"
          cancel-text="否"
          @confirm="confirm(record.id)" >
          <a href="javascript:;"><a-icon type="delete" />删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
      </span>
      <span slot="action">
        <a :href="'#/admin/goodList/add?id='+record.id"><a-icon type="edit" />修改</a>
      </span>
      </div>
    </a-table>
    <div style="margin-top: 18px;">
      <a-pagination
        :current="this.current"
        :total="this.total"
        :show-total="(total) => `共${total}页`"
        :pageSize=this.pageSize
        @change="handleTableChange"
      />
    </div>
  </a-layout-content>
  </div>
</template>

<script>
import { getAdminGoodList } from "@/api/index";
import { editByStatus } from "@/api/index";
import { deleteById } from "@/api/index";
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width:70,
  },
  //   {
  //     title: "产品名称",
  //     dataIndex: "title",
  //     key: "title",
  //     // width: 80,
  //     ellipsis: true,
  //   },
  {
    title: "商品信息",
    dataIndex: "shopInfo",
    key: "shopInfo",
    // ellipsis: true,
    width:500,
    scopedSlots: { customRender: "shopInfo" },
  },
//   {
//     title: "运营商",
//     dataIndex: "operator",
//     key: "operator",
//     ellipsis: true,
//     width: 75,
//     align: "center",
//     scopedSlots: { customRender: "operator" },
//   },
//   {
//     title: "主图",
//     dataIndex: "detailsimgurl",
//     key: "detailsimgurl",
//     ellipsis: true,
//   },
//   {
//     title: "归属地",
//     dataIndex: "location",
//     key: "location",
//     ellipsis: true,
//   },
  {
    title: "年龄限制/岁",
    dataIndex: "ageDoor",
    key: "ageDoor",
    align: "center",
    scopedSlots: { customRender: "ageDoor" },
  },
  {
    title: "开卡限制/张",
    dataIndex: "maxPerson",
    key: "maxPerson",
    align: "center",
    scopedSlots: { customRender: "maxPerson" },
  },
  {
    title: "上架状态",
    dataIndex: "status",
    key: "status",
  
    align: "center",
    scopedSlots: { customRender: "status" },
  },
  {
    title: "添加时间",
    dataIndex: "addTime",
    key: "addTime",
    // ellipsis: true,
  },
  {
    title: "操作",
    key: "action",
    

    scopedSlots: { customRender: "action" },
  },
];
export default {
  name: "GoodsList",
  components:{getAdminGoodList,editByStatus,deleteById},
  data() {
    return {
      dataByGoodsList: [],
      columns,
      loadingStatus: true,
      total: 0,
      current:1,
      pageSize:5,
  
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    confirm(id) {
      deleteById(id).then(res=>{
        if(res.data.code != 200){
          return this.$message.error('删除失败')
        }
        this.$message.success('删除成功')
        return this.getGood(this.current,this.pageSize)
      })
    },
    pushAdd(){
      this.$router.push('/admin/goodList/add')
    },
    getOperatorText(code) {
      switch (code) {
        case 1:
          return "电信";
        case 2:
          return "联通";
        case 3:
          return "移动";
        case 4:
          return "虚拟";
        default:
          return "";
      }
    },
    handleTableChange(page,pageSize) {
      this.current = page
      this.getGood(page,pageSize)
    },
    getGood(page, pageSize){
      getAdminGoodList(page, pageSize).then((res) => {
      this.loadingStatus = false;
      //   if(res.data.code != 200){
      //     return this.$toast('获取失败...');
      //   }
      // console.log('数据：',res.data.data);
      this.total = res.data.data.total;
      this.dataByGoodsList = res.data.data.data;
    });
    },
    statusOnChange(id){
      // console.log(value);
      editByStatus(id).then(res => {
        // console.log(res.data);
        if(res.data.code != 200){
          return this.$message.error('修改失败')
        }
        this.$message.success('修改成功')
        return this.getGood(this.current,this.pageSize)
      })
    },

  },
  created() {
    this.getGood(this.current,this.pageSize)
  },
  
};
</script>

<style >
</style>